<!doctype html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <!--====== USEFULL META ======-->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== TITLE TAG ======-->
    <title>[[${title}]]</title>
    <link rel="shortcut icon" type="image/ico" th:href="@{/images/favicon.png}" href="images/favicon.png" />
    <!--====== STYLESHEETS ======-->
    <link rel="stylesheet" th:href="@{/css/font-awesome-min.css}" href="css/font-awesome-min.css">
    <link rel="stylesheet" th:href="@{/css/bootstrap-min.css}" href="css/bootstrap-min.css">
    <link rel="stylesheet" th:href="@{/css/normalize.css}" href="css/normalize.css">
    <link rel="stylesheet" th:href="@{/css/animate.css}" href="css/animate.css">
    <link rel="stylesheet" th:href="@{/css/lity.css}" href="css/lity.css">
    <link rel="stylesheet" th:href="@{/css/slick-nav.css}" href="css/slick-nav.css">
    <link rel="stylesheet" th:href="@{/css/slick-slider.css}" href="css/slick-slider.css">
    <link rel="stylesheet" th:href="@{/css/theme.css}" href="css/theme.css">
    <!--====== MAIN STYLESHEET ======-->
    <link th:href="@{/style.css}" href="style.css" rel="stylesheet">
    <link th:href="@{/css/responsive.css}" href="css/responsive.css" rel="stylesheet">
    <script th:src="@{/js/vendor/modernizr.js}" src="js/vendor/modernizr.js"></script>

</head>

<body data-spy="scroll" data-target=".mainmenu-area" data-offset="50">


<!-- Page cursor -->
<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
<!-- Preloader-Content -->

<!-- Popup-Search-Form -->

<!-- Popup-Search-Form-End -->
<!-- Full-Wrapper-Start -->
<div class="full-wrapper">

    <!-- Mainmenu-Area-Start -->
    <div th:replace="~{commons/bar :: topbar}"></div>

    <div class="live_wrap">
        <div class="u_header">
            <h1>个人中心</h1>
        </div>

        <div>
            <div th:replace="~{commons/bar :: left}"></div>


            <div class="u_mainbody" style="overflow: inherit;">
                <div class="user_myprofile changepwd_page">
                    <ul class="clearfix nobase" >
                        <span>当前位置：</span>
                        <a href="#">我的资料</a>
                        <span> 〉</span>
                        [[${text}]]
                    </ul>
                    <div class="myprofile_main clearfix data_cont phoneOver" id="js_phone_div">

                        <div class="control_group mb30 clearfix">
                            <label class="control-label fl">[[${text1}]]：</label>
                            <div class="control" style="width:500px;">
                                <div class="input_prepend">
                                    <input th:attr="username=${#authorization.authentication.name}"  th:value="${number}" readonly  id="input5"   />
                                </div>

                            </div>
                        </div>
                        <div class="control_group mb30 clearfix">
                            <label th:text="${text2}" class="control-label fl">密码：</label>
                            <div class="control" >
                                <div class="input_prepend">
                                    <input  th:attr="qq='true'" th:type="${type}" type="text" id="input1"   />
                                    <span id="span1"></span>
                                </div>
                            </div>
                        </div>
                        <div th:if="${text3}" class="control_group mb30 clearfix email_box">
                            <label  th:text="${text3}" class="control-label fl">确认密码：</label>
                            <div class="control">
                                <div class="input_prepend">
                                    <input th:type="${type}" style="text-indent: 0;" id="input2"  class="form_control fl "   />
                                    <span id="span2"></span>
                                </div>
                            </div>
                        </div>
                        <div class="largeBtn">
                            <label class="control-label"></label>
                            <button class="primary_button01" >
                                <span>[[${text}]]</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <form id="form1" th:action="@{${uri}}" method="post" >
        <input type="hidden" id="input3" th:name="${name1}" name="number">
        <input type="hidden" id="input4" th:name="${name2}" name="pasw">
    </form>
    <form id="zx" action="/mylogout" th:action="@{/mylogout}" th:method="post">

    </form>


    <footer style="position: fixed;" class="footer-area rboom">

        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-3 text-center">
                        <div class="copyright">
                            <p>Copyright &copy; 2020. Bi Jia Wang All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- Full-Wrapper-End -->
<script th:src="@{/js/vendor/jquery-min.js}" src="js/vendor/jquery-min.js"></script>

<!--=======  PLUGINS =======-->
<script th:src="@{/js/popper-min.js}" src="js/popper-min.js"></script>
<script th:src="@{/js/bootstrap-min.js}" src="js/bootstrap-min.js"></script>
<script th:src="@{/js/lity-min.js}" src="js/lity-min.js"></script>
<script th:src="@{/js/slick-slider-min.js}" src="js/slick-slider-min.js"></script>
<script th:src="@{/js/slick-nav.js}" src="js/slick-nav.js"></script>
<script th:src="@{/js/wow-min.js}" src="js/wow-min.js"></script>

<!--=======  PLUGINS =======-->


<script>

    function abc() {
        $("#zx").submit();
    }

    $("#input1").blur(test1);
    $("#input2").blur(password);

    function test1(){
        var type = $("#input4").attr("name");
        if (type === "pasw") {
            var wd1 = $("#input1").val();
            if (wd1.length === 0 || wd1.length < 6 || wd1.length > 12) {
                $("#span1").html("<font color='red'>不合规范,长度6-12位</font>");
                return false;
            } else {
                $("#span1").html("");
                return true;
            }
        }
        if(type === "newUsername"){
            var text = $("#input1").val();
            if (text.length === 0){
                $("#span1").html("<font color='red'>请输入用户名</font>");
                return false;
            }else {
                $.ajax({
                    type: "GET",
                    url: "/checkUsername/" + text,
                    success:function (qq) {
                        if (qq === "true"){
                            $("#span1").html("<font color='green'>用户名可用</font>");
                            $("#input1").attr("qq",'true');
                        }else {
                            $("#span1").html("<font color='red'>用户名已占用</font>");
                            $("#input1").attr("qq",'false');
                        }
                    }
                });
                return $("#input1").attr("qq") === "true";
            }
        }
        if (type === "newPhoneNumber"){
            str = $("#input1").val();
            var reg =  /^1\d{10}$/;
            if (!reg.test(str)) {
                $("#span1").html("<font color='red'>手机号码格式错误</font>");
                return false;
            } else {
                $.ajax({
                    type:'GET',
                    url:'/checkPhonename/' + str,
                    success:function (text) {
                        if (text === "true"){
                            $("#span1").html("<font color='green'>手机号码可用</font>");
                            $("#input1").attr("qq",'true');
                        }else {
                            $("#span1").html("<font color='red'>手机号码已注册</font>");
                            $("#input1").attr("qq",'false');
                        }
                    }
                });
                return $("#input1").attr("qq") === "true";
            }
        }
        if(type === "email"){
            str = $("#input1").val();
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}))$/;
            if (!reg.test(str)) {
                $("#span1").html("<font color='red'>电子邮箱格式错误</font>");
                return false;
            } else {
                $.ajax({
                    type:"GET",
                    url:'/checkEmail/' + str,
                    success:function (qq) {
                        if (qq ==="true"){
                            $("#span1").html("<font color='green'>邮箱可用</font>");
                            $("#input1").attr("qq","true");
                        }else {
                            $("#span1").html("<font color='red'>邮箱已占用</font>");
                            $("#input1").attr("qq","true");
                        }
                    }
                });
                return $("#input1").attr("qq") === "true";
            }
        }
    }


    function password(){
        var type = $("#input4").attr("name");
        if (type === "pasw") {
            var wd1 = $("#input1").val();
            var wd2 = $("#input2").val();
            if (wd2.length === 0) {
                $("#span2").html("<font color='red'>不合规范,长度6-12位</font>");
            } else {
                if (wd1 !== wd2) {
                    $("#span2").html("<font color='red'>密码不一致</font>");
                    return false;
                } else {
                    $("#span2").html("");
                    return true;
                }
            }
        }
        if(type === "newUsername"){
            return true;
        }
        if(type === "newPhoneNumber"){
            return true;
        }
        if(type === "email"){
            return true;
        }
    }







    $(document).ready(function(){

        $(".primary_button01").click(function () {
            if (test1() && password()){
                var type = $("#input4").attr("name");
                if (type === "pasw") {
                    var number = $("#input5").val();
                    var pasw = $("#input1").val();
                    $("#input3").val(number);
                    $("#input4").val(pasw);
                    $("#form1").submit();
                }
                if (type === "newPhoneNumber"){
                    var number = $("#input5").val();
                    var pasw = $("#input1").val();
                    $("#input3").val(number);
                    $("#input4").val(pasw);
                    $("#form1").submit();
                }
                if (type === "newUsername"){
                    var oldUsername = $("#input5").val();
                    var newUsername = $("#input1").val();
                    var token = $("meta[name='_csrf']").attr("content");
                    var header = $("meta[name='_csrf_header']").attr("content");
                    $(document).ajaxSend(function (e,xhr,options) {
                        xhr.setRequestHeader(header,token);
                    });
                    $.ajax({
                        type:"POST",
                        url:"/change/updateUsername",
                        data:'oldUsername='+oldUsername + '&newUsername='+ newUsername,
                        success:function () {
                            alert("修改成功，请重新登陆！");
                            $("#zx").submit();
                        }
                    });
                }
                if(type === "email"){
                    var username = $("#input5").attr("username");
                    var email = $("#input1").val();
                    $("#input3").val(username);
                    $("#input4").val(email);
                    $("#form1").submit();
                }
            }
        });



        $(".primary_button01").hover(function () {
            $(this).css("background-color", "#FF7700")
        },function () {
            $(this).css("background-color", "#FEA01E")
        });

    });
</script>
<!--=======  ACTIVE JS =======-->


</body>


</html>
